feat(title): add recipe and tokens by thetaPC · Pull Request #31539 · ionic-team/ionic-framework

thetaPC · 2026-10-06T22:14:41Z

Issue number: resolves internal

What is the current behavior?

ion-title does not fragment styles based on themes.

What is the new behavior?

Migrates ion-title to Modular Ionic: one token-driven stylesheet, IonTitleRecipe and IonTitleConfig, and per-theme token defaults for ios, md and ionic.
Adds a hue prop (bold by default, or subtle). The ionic theme now applies color, matching ios and md.
The ionic title's padding moves from the toolbar into the title's tokens, so an ionic title outside a toolbar now gets the same inline padding as ios and md.
size accepts medium, which is the default from the new IonTitle.size config. The header's condense effect also reads that config, so a title made large through it condenses. Size classes are now title-size-small, title-size-medium and title-size-large, and toolbar's matching classes are toolbar-title-size-*.
Replaces --color with --ion-title-color, which also reaches the copy of a large title shown during the iOS page transition.
Removes runtime theme branching (getIonTheme and the theme virtual prop) and the title-rtl class.
Removes the iOS toolbar's large title rule and its title-large order value. The rule's selector can't reach the slotted title, so it never applied, and the title already computes order: 0. Rendering doesn't change.
Adds a dynamicFontMax token helper, and rounds scaled sizes in dynamicFontMin and dynamicFontMax.
Snapshot changes: the ionic title-color screenshots now show colored titles. In header's "root iOS header in an MD app" screenshot, the title follows the page's theme: an ancestor mode attribute now only affects behavior, as it already does for every migrated component.

Does this introduce a breaking change?

Yes
No

ion-title CSS variables and classes are replaced by token-driven custom properties and prop-named classes. Use the global token for theme-wide styling, or the CSS variable for component-specific overrides.

Color

Old	Token (global)	CSS variable (component-specific)
`--color`	`IonTitle.color`	`--ion-title-color`

Size classes

Old	New
`title-default`	`title-size-medium`
`title-small`	`title-size-small`
`title-large`	`title-size-large`
`toolbar-title-default`	`toolbar-title-size-medium`
`toolbar-title-small`	`toolbar-title-size-small`
`toolbar-title-large`	`toolbar-title-size-large`

RTL class: title-rtl is removed. Use ion-title:dir(rtl) instead.
Theme classes: remove any instances that target ion-title.md or ion-title.ios.

Other information

Left for the parents

Some ion-title styles still live in, or depend on, its parents. They move with that parent's work, so they aren't part of this PR.

Toolbar titlePlacement: the text-align rules in toolbar.ionic.scss, and the iOS title's own centering in title.scss (marked with TODOs). A follow-up PR stacked on this one makes titlePlacement work in every theme and removes both.
Header scroll effects: the rules in header.common.scss that hide and fade the title as the large title collapses. They depend on the header's scroll state and include its condense motion, so they move in the header migration (FW-6843).

How to test

Open each before and after link side by side.

Check	Before	After	What to look for
Color, ionic theme	before	after	Before, every title is dark gray. After, each title is drawn in the color it names, as in ios and md
Hue, every theme	none, new page	ios, md and ionic	The bold titles use the full color, and the subtle titles a muted one. ios uses the same hue colors as md, so its screenshots only cover md
No theme	before	after	Before, titles use the md styles. After, they render as plain text with no padding, which is how a migrated component looks without a theme
Basic, ios theme	before	after	Looks the same on both
Basic, md theme	before	after	Looks the same on both
Basic, ionic theme	before	after	Looks the same on both, including the titles' padding, which now comes from the title instead of the toolbar

vercel · 2026-10-06T22:14:50Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
ionic-framework	Ready	Preview	Oct 12, 2026 3:38pm UTC

thetaPC · 2026-10-06T22:16:15Z

The title in this snapshot now follows the page's md theme instead of the header's mode="ios", since migrated components take their look from the theme and mode only affects behavior; the header itself is still visible, which is what the test checks.

brandyscarney

Looks good! I requested some changes. 🙂

brandyscarney · 2026-10-15T21:00:53Z

Why do we need both a color folder and a hue folder? Shouldn't we just have the hue folder since the color has to be either bold or subtle?

brandyscarney · 2026-10-15T21:01:18Z

 // --------------------------------------------------
 // We're using the slots to force the main toolbar content to be
-// centered in the toolbar. This is a bit of a hack but it works.
+// centered in the toolbar. This is a bit of a hack butx it works.


Suggested change

// centered in the toolbar. This is a bit of a hack butx it works.

// centered in the toolbar. This is a bit of a hack but it works.

brandyscarney · 2026-10-16T13:50:33Z

+/**
+ * This behavior does not vary across directions.
+ *
+ * `ios` is the same as `md`.


Why are we skipping ios? All themes will ship with the same colors so eventually they will all be the same.

brandyscarney · 2026-10-16T13:58:48Z

Should this be named title.interfaces.ts to match the other recipes?

badge.interfaces.ts
chip.interfaces.ts

brandyscarney · 2026-10-16T14:17:03Z

+          height: '100%',
+          position: 'relative',
+          width: '100%',


Why are width and height defined here when they are always 100% for every size?

brandyscarney · 2026-10-16T16:15:28Z

+ */
+export const isLargeTitle = (ionTitleEl: HTMLIonTitleElement) => {
+  const attributeSize = ionTitleEl.getAttribute('size') as IonTitleSize | null;
+  const configSize = config.getObjectValue('IonTitle.size') as IonTitleSize | undefined;


Non-blocking, possible follow-up for FW-6843

size now does two jobs: it sets how big the title looks, and size="large" also marks the title that collapses (here, and in the ion-title.title-size-large query in ios.transition.ts). Now that size is in the theme config, an app that sets IonTitle: { size: 'large' } would make every title large, including main-header titles. Those would then get the large-title layout and count as collapsing titles.

Could the header migration work out the collapsing title from where it sits rather than from its size? For example, treat the title inside ion-header[collapse="condense"] as the collapsing title. Then size would only control appearance, and an app-wide size default would be harmless.

This wouldn't break anything: size="large" would keep working, it just wouldn't be required, and the "condense requires <ion-title size="large">" warning could go away. Fine to leave as is for this PR.

brandyscarney · 2026-10-16T17:16:52Z

+        width?: string;
+      };
+
+      minWidth?: string;


minWidth is only set so the iOS large title wraps onto its own row, and that only works together with the iOS toolbar's flex-wrap. Could it move into toolbar.ios.scss next to that rule as :host(.toolbar-title-size-large) ::slotted(ion-title) { min-width: 100%; } and the token be dropped? That keeps the wrap behavior in one place, and ::slotted reaches the title where the removed .toolbar-content ion-title rule didn't.

brandyscarney · 2026-10-16T17:21:33Z

+| `toolbar-title-small` | `toolbar-title-size-small` |
+| `toolbar-title-large` | `toolbar-title-size-large` |
+
+<h5 id="version-10x-title-rtl-class">`title-rtl` class</h5>


Suggested change

<h5 id="version-10x-title-rtl-class">`title-rtl` class</h5>

<h5 id="version-10x-title-rtl-class"><code>title-rtl</code> class</h5>

brandyscarney · 2026-10-16T17:22:27Z

+|---|---|---|
+| `--color` | `IonTitle.color` | `--ion-title-color` |
+
+<h5 id="version-10x-title-hue">New `hue` property and color tokens</h5>


Suggested change

<h5 id="version-10x-title-hue">New `hue` property and color tokens</h5>

<h5 id="version-10x-title-hue">New <code>hue</code> property and color tokens</h5>

brandyscarney · 2026-10-16T17:22:50Z

+`ion-toolbar` builds its own classes from these, so they change as well:
+
+| Old (9.x) | New |
+|---|---|
+| `toolbar-title-default` | `toolbar-title-size-medium` |
+| `toolbar-title-small` | `toolbar-title-size-small` |
+| `toolbar-title-large` | `toolbar-title-size-large` |


Should this go in toolbar's section instead?

feat(title): add recipe and tokens

d2ed044

thetaPC added this pull request to stack #31538 October 6, 2026 22:14

github-actions Bot added package: core @ionic/core package package: angular @ionic/angular package package: vue @ionic/vue package package: react @ionic/react package labels Oct 6, 2026

thetaPC commented Oct 6, 2026

View reviewed changes

chore(): run lint

3512a03

vercel Bot deployed to Preview October 6, 2026 22:32

View deployment

thetaPC added 4 commits October 9, 2026 19:28

fix(header): detect a large title set through config

238ac54

refactor(title): remove unused element and destructure color

d20c2d2

docs(title): explain the translateZ transform

3c7c840

test(title): cover hue classes and config defaults

ac08f44

vercel Bot deployed to Preview October 10, 2026 02:34

View deployment

thetaPC added 2 commits October 12, 2026 08:13

refactor(title): move the ionic title padding out of the toolbar

94d9dad

refactor(toolbar): remove the unused ios large title rule

035a4ee

vercel Bot deployed to Preview October 12, 2026 15:38

View deployment

thetaPC mentioned this pull request Oct 12, 2026

test(title): add color and rtl coverage #31537

Open

1 of 2 tasks

thetaPC marked this pull request as ready for review October 12, 2026 18:13

thetaPC requested a review from a team as a code owner October 12, 2026 18:13

thetaPC requested a review from ShaneK October 12, 2026 18:13

brandyscarney requested changes Oct 16, 2026

View reviewed changes

	// centered in the toolbar. This is a bit of a hack butx it works.
	// centered in the toolbar. This is a bit of a hack but it works.

	<h5 id="version-10x-title-rtl-class">`title-rtl` class</h5>
	<h5 id="version-10x-title-rtl-class"><code>title-rtl</code> class</h5>

	<h5 id="version-10x-title-hue">New `hue` property and color tokens</h5>
	<h5 id="version-10x-title-hue">New <code>hue</code> property and color tokens</h5>

Conversation

thetaPC commented Oct 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What is the current behavior?

What is the new behavior?

Does this introduce a breaking change?

Other information

Left for the parents

How to test

Uh oh!

vercel Bot commented Oct 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

brandyscarney left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

This branch was successfully deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

thetaPC commented Oct 6, 2026 •

edited

Loading

vercel Bot commented Oct 6, 2026 •

edited

Loading